<template>
  <div class="container">

    <!-- 面包屑导航 -->
    <navbar></navbar>
    <div class="content page-title">
      <h2>客户数据看板</h2>
    </div>
    <div class="content search-content">
      <!--      <h2>标题-Title</h2>-->
      <search-com type="customer" @outputSearchData="receiveSearchData" @searchBasic="getStatistics($event)"></search-com>
    </div>

    <div class="content" v-loading="baseData.loading">
      <h3 class="card-title">基础数据</h3>
      <div class="base-data-list">
        <template class="base-data-item" v-for="(item, index) in baseData.list">
          <basic-data :basicDataItem="item" :basicDataItemIndex="index"></basic-data>
        </template>
      </div>
    </div>

    <div class="content sale-chart distribution-proportion-chart">
      <div class="sale-chart-left frequency">
        <h3 class="card-title card-title-company"><label>客户购买频次分布</label>
          <div class="staff-button-list">
            <search-com-company class="search-company" :type="frequency.type"
                                :dateArr="frequency.dateArr"
                                @outputSearchData="receiveSearchData"></search-com-company>
            <el-button size="small" @click="onDownload('frequency')" class="download-table"
                       icon="el-icon-download"></el-button>
          </div>
        </h3>
        <echarts-frequency v-loading="frequency.loading" :config="frequency.config" :dataList="frequency.dataList"></echarts-frequency>
      </div>
      <div class="sale-chart-right source">
        <h3 class="card-title"><label>各平台客户来源占比</label>
          <div class="staff-button-list">
            <el-button size="small" @click="onDownload('orderAmountPlatform')" class="download-table"
                       icon="el-icon-download"></el-button>
          </div>
        </h3>
        <search-com-company class="search-company" :type="orderAmountPlatform.type"
                            :dateArr="orderAmountPlatform.dateArr"
                            @outputSearchData="receiveSearchData"></search-com-company>
        <echarts-pie v-loading="orderAmountPlatform.loading" :config="orderAmountPlatform.config" :dataList="orderAmountPlatform.dataList"></echarts-pie>
      </div>
    </div>

    <div class="content table-content">
      <div class="table-content-item">
        <h3 class="card-title card-title-company">新老客户人数比
          <div class="staff-button-list">
            <search-com-company class="search-company" :type="contrastPeople.type"
                                :dateArr="contrastPeople.dateArr"
                                @outputSearchData="receiveSearchData"></search-com-company>
            <el-button size="small" @click="onDownload('contrastPeople')" class="download-table"
                       icon="el-icon-download"></el-button>
            <!--            <el-button size="small" @click="onDownloadStaff()" class="download-table">&#8595;</el-button>-->
          </div>
        </h3>
        <div id="people">
          <!-- documentId 参数为外层 ID -->
          <comparison  v-loading="contrastPeople.loading" documentId="people" :config="contrastPeople.config"
                      :dataList="contrastPeople.dataList"></comparison>
        </div>
      </div>
      <div class="table-content-item">
        <h3 class="card-title card-title-company"><label>新老客户购买金额对比</label>
          <div class="staff-button-list">
            <search-com-company class="search-company" :type="contrastMoney.type"
                                :dateArr="contrastMoney.dateArr"
                                @outputSearchData="receiveSearchData"></search-com-company>
            <el-button size="small" @click="onDownload('contrastMoney')" class="download-table"
                       icon="el-icon-download"></el-button>
            <!--            <el-button size="small" @click="onDownloadStaff()" class="download-table">&#8595;</el-button>-->
          </div>
        </h3>

        <div id="money">
          <!-- documentId 参数为外层 ID -->
          <comparison v-loading="contrastMoney.loading" documentId="money" :config="contrastMoney.config" :dataList="contrastMoney.dataList"></comparison>
        </div>
      </div>
    </div>
    <!--
    <div class="content">
      <h3 class="card-title"><label>团队统计(DEMO)</label>
        <div class="staff-button-list">
          <el-button size="small" @click="onDownloadStaff()" class="download-table" icon="el-icon-download"></el-button>
        </div>
      </h3>
      <data-board-table :dataList="page.list" :config="orgCodeTatal.list"
                        :sortObj="orgCodeTatal.sortObj"></data-board-table>
    </div>
    -->

  </div>
</template>

<script>
import navbar from '@/components/navbar.vue'
import SearchCom from './components/SearchCom.vue'
import SearchComCompany from './components/SearchComCompany.vue'
import BasicData from './components/BasicData.vue'
import TotalSales from './components/TotalSales.vue'
import DataBoardTable from './components/DataBoardTable.vue'
import Distribution from './components/Distribution.vue'
import EchartsPie from './components/EchartsPie.vue'
import Comparison from './components/Comparison.vue'
import EchartsFrequency from './components/EchartsFrequency.vue'
import dataBoardCommon from './mixins/dataBoardCommon'

import { getDateRange } from '@/utils/index.js'

export default {
  mixins: [dataBoardCommon],
  components: {
    navbar,
    SearchCom,
    SearchComCompany,
    BasicData,
    TotalSales,
    Distribution,
    EchartsPie,
    DataBoardTable,
    Comparison,
    EchartsFrequency
  },
  data () {
    return {
      loading: false,
      basicDays: 1, // 基础数据默认天数
      page: { list: [], pageNo: 1, pageSize: 8, totalNum: 0, currentPage: 1 },
      baseData: {
        loading: false,
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        userDitch: '', // 入线渠道
        list: [
          { title: '客户数', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: '75.00' },
          { title: '已分配客户数', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: -5.01 },
          { title: '已跟进客户数', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: '55.00' },
          { title: '未跟进客户数', dateArr: ['2022-06-08', '2022-06-10'], totalNumber: '888.88', increase: -15 }
        ]
      },
      imageArr: [], // 列表有图片时使用
      orgCodeTatal: { // 团队统计
        sortObj: { prop: 'categoryId', order: 'descending' }, // 排序
        list: [
          { prop: 'stock', label: '分配数量' },
          { prop: 'stock', label: '通过数' },
          { prop: 'stock', label: '通过率' },
          { prop: 'stock', label: '意向' },
          {
            label: '年龄段', children: [
              { prop: 'stock', label: '20岁以下', sortable: true },
              { prop: 'marketPrice', label: '20岁-50岁', sortable: true }
            ]
          },
          {
            label: '性别', children: [
              { prop: 'stock', label: '男' },
              { prop: 'marketPrice', label: '女' },
              { prop: 'marketPrice', label: '未知' }
            ]
          },
          { prop: 'stock', label: '购买人数' },
          { prop: 'marketPrice', label: '销售额', sortable: true },
          { prop: 'categoryId', label: '客单价', sortable: true },
          { prop: 'operate', label: '操作', slot: 'button', fixed: 'right', width: 100, align: 'center' }
        ]
      },
      screenWidth: document.body.clientWidth,
      frequency: { // 客户购买频次分布
        loading: false,
        title: '客户购买频次分布',
        type: 'frequency',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        config: {
          total: 1,
          colorArr: ['#4168e7'],
          dataList: ['2次以下（不含两次）', '2-3次', '4-5次', '5次以上（不含5次）']
        },
        dataList: {
          peopleNum: [120, 250, 150, 80, 70, 110, 130],
          proportion: [120, 250, 150, 80, 70, 110, 130]
        }
      },
      orderAmountPlatform: { // 各平台客户来源占比
        loading: false,
        title: '各平台客户来源占比',
        type: 'orderAmountPlatform',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        config: {
          className: 'orderAmountPlatform',
          radius: '55%',
          color: ['#4168e7', '#14d8cb', '#1ccf79', '#ffd83b', '#f65570', '#9850fc', '#73c0de', '#5470c6', '#91cc75', '#fac858', '#ee6666']
        },
        dataList: [
          { value: 422, name: '360元以上' },
          { value: 335, name: '315-360元' },
          { value: 310, name: '270-315元' },
          { value: 265, name: '220-270元' },
          { value: 215, name: '180-220元' },
          { value: 152, name: '0-180元' }
        ]
      },
      contrastPeople: { // 新老客户人数比
        loading: false,
        title: '新老客户人数比',
        type: 'contrastPeople',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        config: {},
        dataList: [
          { value: 333, name: '新客户', color: '#4168e7' },
          { value: 205, name: '老客户', color: '#14d8cb' }
        ]
      },
      contrastMoney: { // 新老客户购买金额对比
        loading: false,
        title: '新老客户购买金额对比',
        type: 'contrastMoney',
        orgCode: '', // 公司部门
        dateArr: [], // 日期
        config: {},
        dataList: [
          { value: 333, name: '新客户', color: '#4168e7' },
          { value: 735, name: '老客户', color: '#14d8cb' }
        ]
      }
    }
  },
  mounted () {
    this.$nextTick(_ => {
      // console.log('mounted this.$nextTick')
    })
  },
  created () {
    // this.fetchData()
    this.fetchDefaultData() // // 获取默认数据
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null
    next()
  },
  activated () {
    // this.brandSelect();
    // this.brandSelectBox();
  },
  watch: {
    /* 监听*/
    screenWidth (val) {
      this.screenWidth = val
      console.log('this.screenWidth', this.screenWidth)
      this.windowOnresize()
    }
  },
  methods: {
    // 获取默认数据
    fetchDefaultData () {
      this.getStatistics(true) // 订单销售数据统计
      this.getPlatformStatisticsCustomer(true) // 各平台客户来源占比
      this.getCountStatisticsCustomer(true) // 客户购买频次分布
      this.getContrastPeople(true) // 新老客户人数比
      this.getAmountStatisticsCustomer(true) // 新老客户购买金额对比
    },
    // 订单销售数据统计
    getStatistics (isDefault, dateArr) {
      this.baseData.loading = true
      // days 1 今天
      // days 1001 昨天
      // days 1070 过去七天
      // days 1071 本周
      // days 1031 本月
      // days 10000 自定义时段
      // debugger
      const days = this.basicDays
      if (isDefault || days === 1 || days === 1001) { // 默认 今天 昨天
        this.baseData.dateArr = this.defaultDateTime(days)
      } else if (days === 1071) { // 本周
        const dateRange = getDateRange('week')
        this.baseData.dateArr[0] = dateRange.startDate
        this.baseData.dateArr[1] = dateRange.enDate
        console.log('本周，日期范围', this.baseData.dateArr)
      } else if (days === 1031) { // 本月
        const dateRange = getDateRange('month')
        this.baseData.dateArr[0] = dateRange.startDate
        this.baseData.dateArr[1] = dateRange.enDate
        console.log('本月，日期范围', this.baseData.dateArr)
      } else { // 选择
        console.log(this.baseData.dateArr)
        if (this.baseData.dateArr[0].indexOf('undefined') > -1) {
          if (days === 10000) {
            this.baseData.loading = false
            return this.$message.warning('请选择日期！')
          }
          this.baseData.dateArr = this.defaultDateTime(days)
        }
      }
      // debugger
      const tempOrgCode = this.baseData.orgCode
      if (tempOrgCode == 'undefined' || !tempOrgCode || !/[^\s]/.test(tempOrgCode)) {
        // 为空
        this.baseData.orgCode = this.userInfo.orgCode
      } else {
        // 不为空
        console.log('有选择公司')
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.baseData.dateArr[0],
        endTime: this.baseData.dateArr[1],
        orgCode: this.baseData.orgCode,
        userDitch: this.baseData.userDitch
      }
      this.$api.statisticsCustomer(params).then((res) => {
        this.baseData.loading = false
        if (res.code === 0) {
          const resData = res.data

          // 客户数
          this.baseData.list[0].totalNumber = resData.customerCount
          this.baseData.list[0].increase = resData.customerCountGrowth

          // 已分配客户数
          this.baseData.list[1].totalNumber = resData.assignedCustomerCount
          this.baseData.list[1].increase = resData.assignedCustomerCountGrowth
          this.baseData.list[1].tip = `通过数据文员分配的客户数量`

          // 已跟进客户数
          this.baseData.list[2].totalNumber = resData.followedCustomerCount
          this.baseData.list[2].increase = resData.followedCustomerCountGrowth

          // 未跟进客户数
          this.baseData.list[3].totalNumber = resData.notFollowedCustomerCount
          this.baseData.list[3].increase = resData.notFollowedCustomerCountGrowth

          this.baseData.list.forEach(item => {
            item.totalNumber = `<label>${this.formatNumber(item.totalNumber, 0)}</label><span style="font-size: 25px;font-weight: 400;">人</span>`
            // item.totalNumber = this.formatNumber(item.totalNumber ? item.totalNumber : 0, 2)
            item.increaseNum = Number(item.increase)
            // item.increase = parseInt(item.increase) // 保留整数部分
            item.increase = Math.round(item.increase) // 四舍五入
            item.dateArr[0] = params.startTime.substring(0, 10)
            item.dateArr[1] = params.endTime.substring(0, 10)
          })
          console.log(this.baseData.list)
        }
      }).catch((err) => {
        console.log(err)
        this.baseData.loading = false
      })
    },
    // 各平台客户来源占比
    getPlatformStatisticsCustomer (isDefault, dateArr, orgCodeArrStr) {
      // console.log(isDefault, dateArr, orgCodeArrStr)
      if (isDefault || dateArr) {
        this.orderAmountPlatform.loading = true
      } else {
        return
      }
      this.orderAmountPlatform.orgCode = orgCodeArrStr ? orgCodeArrStr : this.userInfo.orgCode
      let days = 30
      if (isDefault) { // 默认
        this.orderAmountPlatform.dateArr = this.defaultDateTime(days)
      } else { // 选择
        this.orderAmountPlatform.dateArr = this.chooseDateTime(dateArr)
        if (this.orderAmountPlatform.dateArr[0].indexOf('undefined') > -1) {
          this.orderAmountPlatform.dateArr = this.defaultDateTime(days)
        }
        days = this.orderAmountPlatform.dateArr[2]
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.orderAmountPlatform.dateArr[0],
        endTime: this.orderAmountPlatform.dateArr[1],
        orgCode: this.orderAmountPlatform.orgCode
      }
      this.$api.platformStatisticsCustomer(params).then((res) => {
        this.orderAmountPlatform.loading = false
        const resData = res.data
        if(resData.length === 0){
          return this.$message.warning('没有关相数据！')
        }
        resData.forEach(item => {
          item.name = item.label
        })
        this.orderAmountPlatform.dataList = resData
      }).catch((err) => {
        this.orderAmountPlatform.loading = false
        console.log(err)
      })
    },
    // 客户购买频次分布
    getCountStatisticsCustomer (isDefault, dateArr, orgCodeArrStr) {
      if (isDefault || dateArr) {
        this.frequency.loading = true
      } else {
        return
      }
      // debugger
      // this.frequency.loading = true
      this.frequency.orgCode = orgCodeArrStr ? orgCodeArrStr : this.userInfo.orgCode
      let days = 30
      if (isDefault) { // 默认
        this.frequency.dateArr = this.defaultDateTime(days)
      } else { // 选择
        this.frequency.dateArr = this.chooseDateTime(dateArr)
        if (this.frequency.dateArr[0].indexOf('undefined') > -1) {
          this.frequency.dateArr = this.defaultDateTime(days)
        }
        days = this.frequency.dateArr[2]
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.frequency.dateArr[0],
        endTime: this.frequency.dateArr[1],
        orgCode: this.frequency.orgCode
      }
      this.$api.countStatisticsCustomer(params).then((res) => {
        this.frequency.loading = false
        let tempTotal = 0
        this.frequency.config.dataList = res.data.column
        this.frequency.dataList.peopleNum = res.data.value
        this.frequency.dataList.proportion = res.data.proportion
        // console.log(this.frequency.dataList.proportion)
        res.data.value.forEach(item => {
          tempTotal += Number(item)
        })
        this.frequency.config.total = tempTotal
        // console.log(this.frequency)
      }).catch((err) => {
        console.log(err)
        this.frequency.loading = false
      })
    },
    // 新老客户人数比
    getContrastPeople (isDefault, dateArr, orgCodeArrStr) {
      if (isDefault || dateArr) {
        this.contrastPeople.loading = true
      } else {
        return
      }
      this.contrastPeople.orgCode = orgCodeArrStr ? orgCodeArrStr : this.userInfo.orgCode
      let days = 30
      if (isDefault) { // 默认
        this.contrastPeople.dateArr = this.defaultDateTime(days)
      } else { // 选择
        this.contrastPeople.dateArr = this.chooseDateTime(dateArr)
        if (this.contrastPeople.dateArr[0].indexOf('undefined') > -1) {
          this.contrastPeople.dateArr = this.defaultDateTime(days)
        }
        days = this.contrastPeople.dateArr[2]
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.contrastPeople.dateArr[0],
        endTime: this.contrastPeople.dateArr[1],
        orgCode: this.contrastPeople.orgCode
      }
      this.$api.oldStatisticsCustomer(params).then((res) => {
        this.contrastPeople.loading = false
        const colorArr = []
        this.contrastPeople.dataList.forEach(item => {
          colorArr.push(item.color)
        })
        const resData = res.data
        if(resData.length === 0){
          return this.$message.warning('没有关相数据！')
        }
        resData.forEach((item, index) => {
          item.name = item.label
          item.color = colorArr[index]
        })
        this.contrastPeople.dataList = resData
      }).catch((err) => {
        console.log(err)
        this.contrastPeople.loading = false
      })
    },
    // 新老客户购买金额对比
    getAmountStatisticsCustomer (isDefault, dateArr, orgCodeArrStr) {
      if (isDefault || dateArr) {
        this.contrastMoney.loading = true
      } else {
        return
      }
      this.contrastMoney.orgCode = orgCodeArrStr ? orgCodeArrStr : this.userInfo.orgCode
      let days = 30
      if (isDefault) { // 默认
        this.contrastMoney.dateArr = this.defaultDateTime(days)
      } else { // 选择
        this.contrastMoney.dateArr = this.chooseDateTime(dateArr)
        if (this.contrastMoney.dateArr[0].indexOf('undefined') > -1) {
          this.contrastMoney.dateArr = this.defaultDateTime(days)
        }
        days = this.contrastMoney.dateArr[2]
      }
      const params = {
        pageNo: 1, pageSize: 999,
        startTime: this.contrastMoney.dateArr[0],
        endTime: this.contrastMoney.dateArr[1],
        orgCode: this.contrastMoney.orgCode
      }
      this.$api.amountStatisticsCustomer(params).then((res) => {
        this.contrastMoney.loading = false
        const colorArr = []
        this.contrastMoney.dataList.forEach(item => {
          colorArr.push(item.color)
        })
        const resData = res.data
        if (resData.length === 0) {
          return this.$message.warning('没有关相数据！')
        }
        resData.forEach((item, index) => {
          item.name = item.label
          item.color = colorArr[index]
        })
        this.contrastMoney.dataList = resData
      }).catch((err) => {
        console.log(err)
        this.contrastMoney.loading = false
      })
    },
    fetchData (type) {
      this.loading = true
      if (type === 'reset') {
        // 清空表单，还原数据
        this.$refs['searchForm'].resetFields()
        this.page.pageNo = 1
        this.page.pageSize = 8
      }
      let params = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        status: this.page.status
      }
      if (type === 'search') {
        params.pageNo = 1
      }
      const searchForm = this.searchForm
      params = Object.assign(params, searchForm)
      // params.categoryId = searchForm.categoryId[searchForm.categoryId.length - 1]
      // 去除字符串 前后 空格
      for (const item in params) {
        if (params[item] === '') {
          delete params[item]
        }
        continue
        if (typeof params[item] === 'string') {
          params[item] = params[item].trim()
        }
      }
      this.$api.goodsPageList(params).then((res) => {
        this.loading = false
        if (res.code === 0) {
          this.imageArr = []
          res.data.list.forEach(e => {
            if (e.mainImage && e.mainImage.indexOf('http://fenxiao.muruji.com/') !== 0) {
              e.mainImage = this.ImgHttps + e.mainImage
            }
            e.mainImageArr = []
            e.mainImageArr.push(e.mainImage)
            this.imageArr.push(e.mainImage)
          })
          this.page.list = res.data.list
          this.page.totalNum = res.data.totalNum
        } else {
          console.log('goodsPageList - 失败', type)
        }
      }).catch((err) => {
        this.loading = false
        console.log(err)
      })
    },
    // 点击页码，切换页面
    handleCurrentChange (val) {
      console.log('handleCurrentChange, 点击页码，切换页面')
      this.page.pageNo = val
      this.fetchData()
    },
    handleSizeChange (val) {
      console.log('handleSizeChange, 修改每页显示')
      this.page.pageSize = val
      this.fetchData()
    },
    formatNumber (price, num) {
      let comma = price
      if (num) {
        comma = Number(price).toFixed(num)
      } else {
        comma = price
      }
      comma = String(comma).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      return comma
    },
    onChangeStaffType (value) { // 切换员工类型
      this.currentChooseStaff = value
    },
    onDownload (type) {
      this.loading = true
      let downloadFun, params = {}
      switch (type) {
        case 'frequency': // 客户购买频次分布
          console.log('客户购买频次分布')
          downloadFun = this.$api.countStatisticsExportCustomer
          params = {
            pageNo: 1, pageSize: 999,
            startTime: this.frequency.dateArr[0],
            endTime: this.frequency.dateArr[1],
            orgCode: this.frequency.orgCode
            // orgCode: 'DT374265477'
          }
          break
        case 'orderAmountPlatform': // 各平台客户来源占比
          console.log('各平台客户来源占比')
          downloadFun = this.$api.platformStatisticsExportCustomer
          params = {
            pageNo: 1, pageSize: 999,
            startTime: this.orderAmountPlatform.dateArr[0],
            endTime: this.orderAmountPlatform.dateArr[1],
            orgCode: this.orderAmountPlatform.orgCode
            // orgCode: 'DT374265477'
          }
          break
        case 'contrastPeople': // 新老客户人数比
          console.log('新老客户人数比')
          downloadFun = this.$api.platformStatisticsExportCustomer
          params = {
            pageNo: 1, pageSize: 999,
            startTime: this.contrastPeople.dateArr[0],
            endTime: this.contrastPeople.dateArr[1],
            orgCode: this.contrastPeople.orgCode
            // orgCode: 'DT374265477'
          }
          break
        case 'contrastMoney': // 新老客户购买金额对比
          console.log('新老客户购买金额对比')
          downloadFun = this.$api.platformStatisticsExportCustomer
          params = {
            pageNo: 1, pageSize: 999,
            startTime: this.contrastMoney.dateArr[0],
            endTime: this.contrastMoney.dateArr[1],
            orgCode: this.contrastMoney.orgCode
            // orgCode: 'DT374265477'
          }
          break
        default:
          console.log('onDownload')
      }
      downloadFun(params).then((res) => {
        if (res.code === 0) {
          this.downloadlink(res.data)
        }
        this.loading = false
      }).catch((err) => {
        console.log(err)
        this.loading = false
      })
    },
    setElTable () { // 设置表格宽高
      const sWidth = this.screenWidth
      // console.log( sWidth )
      this.elTable.height = parseInt(sWidth / 3)
      /*
      if(sWidth > 1900){
        this.elTable.height = 800
      } else if (sWidth > 1600) {
        this.elTable.height = 800
      } else if (sWidth > 1200) {
        this.elTable.height = 600
      } else if (sWidth > 600) {
        this.elTable.height = 400
      }
      */
      // this.elTable.height = getScreenWidth
    }
  }
}
</script>

<style scoped lang="scss">
@import './assets/DataCoardCommon';

///deep/ .el-table th > .cell { text-align: unset; }

h2 {
  position: relative;
  margin-bottom: 21px;
  padding-left: 11px;

  &:before {
    position: absolute;
    top: 4px;
    left: 0;
    display: inline-block;
    content: '';
    width: 4px;
    height: 17px;
    background-color: #2d7edf;
  }
}


.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
  //background-color: #ecf5ff;
}

.sale-chart {
  padding: 0 !important;
  background-color: #f5f5f5 !important;

  .sale-chart-left, .sale-chart-right {
    float: left;
    //margin-right: 10px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 5px;
  }

  .sale-chart-left {
    margin-right: 10px;
    width: calc(100% - 510px);

    .card-header {
      margin-bottom: 18px;
      width: calc(100% - 40px);
      background: #F4F7FC;
      border-radius: 4px;
      padding: 8px 20px;

      .card-total .card-total-left, .card-ratio .card-ratio-left {
        width: 60%;
        float: left;
        position: relative;
      }

      .card-total .card-total-right, .card-ratio .card-ratio-right {
        width: 170px;
        float: right;
        text-align: left;

        span {
          font-size: 16px;
          color: #4168E7;
        }

        label {
          &:first-child {
            font-size: 14px;
            margin-right: 20px;
            font-weight: 400;
            color: #666666;
          }

          &:last-child {
            font-size: 20px;
            font-weight: 400;
            color: #4168E7;
            width: 120px;
          }
        }
      }

      .card-total {
        .card-total-left {
          font-size: 28px;
          font-weight: bold;
          color: #4168E7;

          span {
            font-size: 20px;
          }
        }

        .card-total-right {
        }

      }

      .card-ratio {
        .card-ratio-left, .card-ratio-right {

        }

        .card-ratio-left {
          //background-color: #2D7EDF;
          p {
            height: 28px;
            line-height: 28px;
            padding: 0 20px 0 35px;
            background: #FFFFFF;
            border-radius: 14px;
            display: table;

            .arrow {
              top: 4px;
              left: 8px;
            }
          }
        }

        .card-ratio-right {

        }
      }
    }

    .card-body {
      width: 100%;
    }
  }

  .sale-chart-right {
    width: 420px;
    float: right;
    //padding-top: 20px;
    //padding-bottom: 50px;
    .buy-money-box{
      padding: 26px 0;
    }

    h3 {
      margin-bottom: 23px;
    }
  }
}

//客户购买频次分布
//各平台客户来源占比
.distribution-proportion-chart {
  .sale-chart-left {
    float: right;
    margin-right: 0;
  }

  .sale-chart-right {
    float: left;
    margin-right: 10px;
  }
}

//新老客户人数比
.card-title-company, .distribution-proportion-chart .sale-chart-left {
  .staff-button-list {
    width: 470px !important;

    .search-company {
      width: 420px !important;
      margin-right: 10px;
      float: left;
    }

    .el-button {
      display: block;
      float: left;
      margin-top: 5px;
    }
  }
}

/deep/ .el-table__body-wrapper .el-table__row .el-table__cell:first-child .cell {
  color: #4168E7;
}

.el-table__row {
  .el-table__cell {
    .cell {
      padding-left: 12px;
      padding-right: 12px;

      .el-image {
        width: 100px;
        height: 70px;
        overflow: hidden;

        /deep/ img {
          width: 100%;
          object-fit: cover;
        }
      }
    }
  }
}

.page {
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
@media (min-width: 1550px) {
  $source-width:42%;
  // 来源
  .source{
    width: $source-width!important;
  }
  // 频次
  .frequency{
    width: calc(100% - (#{$source-width} + 90px))!important;
  }
}
@media screen and (max-width: 1550px) {
  $source-width:40%;
  // 来源
  .source{
    width: $source-width!important;
  }
  // 频次
  .frequency{
    width: calc(100% - (#{$source-width} + 90px))!important;
  }
}
@media screen and (max-width: 1300px) {
  $source-width:420px;
  // 来源
  .source{
    width: $source-width!important;
  }
  // 频次
  .frequency{
    width: calc(100% - (#{$source-width} + 90px))!important;
  }
}
@media screen and (max-width: 1000px) {

}
</style>
